<template>
    <div style="height: calc(100vh - 50px)">
        <!--地图Div-->
        <div class="map-display" id="mapDiv">
        </div>
        <!--地图左上角按钮栏-->
        <div id="myToolBtns" class="mytool-btns">
            <div id="buttonDiv" style="float: left;">
                <div class="navbtn-items" v-if=layerShow @click="togglePanel('lyrPanelVisible','layerFlag')" title="图层" id="layerBtn">
                    <img src="../../assets/images/map_icons/layer.png">
                    <img v-show="layerFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="地图量测" id="measureBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="measureFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible','decorateFlag')" title="地图整饰控制" id="decorateBtn">
                    <img src="../../assets/images/map_icons/Decorate.png">
                    <img v-show="decorateFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>

                <div class="navbtn-items" v-if=attrQueryPanelShow @click="togglePanel('attrQueryPanelVisible','attrQueryFlag')" title="属性查询" id="attrQueryBtn">
                    <img src="../../assets/images/map_icons/shuxing.png">
                    <img v-show="attrQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=geometryQueryPanelShow @click="togglePanel('geometryQueryPanelVisible','geometryQueryFlag')" title="几何查询" id="geometryQueryBtn">
                    <img src="../../assets/images/map_icons/kongjian.png">
                    <img v-show="geometryQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <!--<div class="navbtn-items" v-if=distanceQueryPanelShow @click="togglePanel('distanceQueryPanelVisible','distanceQueryFlag')" title="距离查询" id="distanceQueryBtn">
                  <img src="../../assets/images/map_icons/juli.png">
                  <img v-show="distanceQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
                       class="item-selected">
                </div>-->
                <div class="navbtn-items" v-if=bufferAnalystPanelShow @click="togglePanel('bufferAnalystPanelVisible','bufferAnalystFlag')" title="缓冲区分析" id="bufferAnalystBtn">
                    <img src="../../assets/images/map_icons/huanchongqu.png">
                    <img v-show="bufferAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>

                <div class="navbtn-items" v-if=heatMapAnalystPanelShow @click="togglePanel('heatMapAnalystPanelVisible','heatMapAnalystFlag')" title="热力图" id="heatMapAnalystBtn">
                    <img src="../../assets/images/map_icons/relitu.png">
                    <img v-show="heatMapAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=clusterLayerPanelShow @click="togglePanel('clusterLayerPanelVisible','clusterLayerFlag')" title="聚类" id="clusterLayertBtn">
                    <img src="../../assets/images/map_icons/cluster.png">
                    <img v-show="clusterLayerFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=thiessenAnalystPanelShow @click="togglePanel('thiessenAnalystPanelVisible','thiessenAnalystFlag')" title="泰森多边形" id="thiessenAnalystBtn">
                    <img src="../../assets/images/map_icons/duobianxing.png">
                    <img v-show="thiessenAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>

            </div>
        </div>

        <!--图层管理面板-->
        <div class="layerBox" :class="{'layer-hide':lyrPanelVisible}" :id="lyrBox">
            <div id="panelHeader">
                <div class="options lyropt">
                    <span style="font-weight: bold;font-size: 1.2em;">图层管理面板</span>
                    <el-checkbox @change="handleOpt" style="color: black; float: right;">图层透明度调节</el-checkbox>
                </div>
            </div>
        </div>

        <!--“量测”下拉-->
        <div class="mapMeasurementTools" :class="{'layer-hide':measurePanelVisible}">    <!--tool-item-panel v-if="measurePanelVisible"-->
            <div class="map-tool-item" title="测面积" id="myMeasureArea">  <!--@click="myMeasureArea" @click="triggerBus('area')"-->
                <img src="../../assets/images/map_icons/Area.png" />
                <span>面积</span>
            </div>
            <div class="map-tool-item" title="测距离" id="myMeasureDistance">    <!-- @click="myMeasureDistance" @click="triggerBus('distance')"-->
                <img src="../../assets/images/map_icons/Distance.png" />
                <span>距离</span>
            </div>
            <div class="map-tool-item" title="清除量测结果" id="myClearMeasure">  <!--@click="myClearMeasure" @click="triggerBus('clean')"-->
                <img src="../../assets/images/map_icons/清空.svg" />
                <span>清除</span>
            </div>
        </div>

        <!--“整饰”下拉-->
        <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratePanelVisible}" data-toolPanel-title="Decorate">
            <div class="map-tool-item"  id="CoordinateDisplay" title="坐标" @click="coordinateShow=!coordinateShow">
                <img src="../../assets/images/map_icons/Coordinate.png">
                <span>坐标</span>
            </div>
            <div class="map-tool-item"  id="ScaleDisplay" title="比例尺" @click="scaleShow=!scaleShow">
                <img src="../../assets/images/map_icons/Scale.png">
                <span>比例尺</span>
            </div>
        </div>

        <!--坐标与比例尺-->
        <div class="coordinateAndScaleBar">
            <!--地图比例尺-->
            <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
                <div id="scaleBar"></div>
            </div>
            <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
            <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
        </div>

        <!--进度条-->
        <div id="preview">
            <img src="../../assets/images/waiting.gif" alt='' /><br />
            <br />
            <span>正在查询/分析，请稍候……</span>
        </div>

        <!--属性查询-->
        <div :class="{'layer-hide':attrQueryPanelVisible}" id="sxcx" style="background-color: rgba(255,255,255,0.5);">
            <el-select
                    v-model="value1"
                    multiple
                    style="margin-left: 45px;"
                    placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select
                    v-model="value2"
                    collapse-tags
                    style="margin-left: 20px;"
                    placeholder="请选择">
                <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-input v-model="attQueryConditions" style="margin-left:20px;width:200px;"  placeholder="请输入查询条件" clearable />

            <el-button
                    style="position:absolute;margin-left: 1em;"
                    type="primary"
                    icon="el-icon-search"
                    @click="AttQuery"
            >
                <!--@click="attrQuery"-->
                查询
            </el-button>
        </div>

        <!--几何空间查询-->
        <div :class="{'layer-hide':geometryQueryPanelVisible}" id="jhcx" style="margin-left: 45px; margin-top:20px;">
            <el-button
                    style="position:absolute;margin-left: 1em;"
                    type="success"
                    round
                    icon="el-icon-search"
                    @click="geometryQuery"
            >
                <!--@click="geometryQuery"-->
                几何查询
            </el-button>
            <el-button
                    style="position:absolute;margin-left: 13em;"
                    type="warning"
                    plain
                    size="small"
                    @click="myClearGeometryQuery"
            >
                <!--@click="myClearGeometryQuery"-->
                清除 / 取消
            </el-button>
        </div>

        <!--缓冲区分析面板-->
        <div :class="{'layer-hide':bufferAnalystPanelVisible}" id="hcqfx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
            <h3>缓冲区分析面板</h3>
            <!--缓冲半径：<input type="text" v-model="buffer_radius" />  &lt;!&ndash;:value="buffer_radius"&ndash;&gt;-->
            <label style="width: 54px;line-height: 17px">（单圈）缓冲半径:</label>
            <br />
            <input id="bufferRadius" type="range" min="100" max="100000" step="1" v-model="buffer_radius" />
            {{ this.buffer_radius}} m
            <br />  <br />
            <input id="bufferRadiusForMul" type="text" v-model="radiusStr" /> &nbsp; m
            <br /> <br />
            <input type="button" id="bufferOneRing" value="开始分析（单圈）"/>
            &nbsp;&nbsp;&nbsp;
            <input type="button" id="bufferMulRings" value="开始分析（多圈）"/>
            <br/>
        </div>

        <!--热力图分析面板-->
        <div :class="{'layer-hide':heatMapAnalystPanelVisible}" id="rlt" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
            <h3>热力图分析面板</h3>
            <label style="width: 54px;line-height: 17px">热力半径:</label><input id="radius" type="range" min="10" max="100" step="1" v-model="heatmap_radius" value="500" />   <!--value="10"-->
            {{ this.heatmap_radius}} m
            <!--热点半径：<input type="text" v-model="heatmap_radius" /> &lt;!&ndash;:value="heatmap_radius"&ndash;&gt;-->
            <br/>
            <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="10" max="100" step="1" v-model="heatmap_blur" />   <!--value="10"-->
            {{ this.heatmap_blur}} m
            <!--模糊尺寸：<input type="text" v-model="heatmap_blur" />  &lt;!&ndash;:value="heatmap_blur"&ndash;&gt;-->
            <br/> <br/>
            <input type="button" id="heatMapAnalyst" value="开始分析"/>
            &nbsp;&nbsp;&nbsp;
            <input type="button" id="heatMapClear" value="清除"/>
            <br/>
        </div>

        <!--聚类图显示-->
        <div :class="{'layer-hide':clusterLayerPanelVisible}" id="jlt" style="margin-left: 45px; margin-top:60px;">
            <el-button
                    style="position:absolute;margin-left: 1em;background-color: #1c84c6;"
                    type="success"
                    round
                    icon="el-icon-search"
                    id="clusterLayerShow"
            >
                显示聚类图
            </el-button>
            <el-button
                    style="position:absolute;margin-left: 13em;"
                    type="warning"
                    plain
                    size="small"
                    id="myClearClusterLayer"
            >
                清除
            </el-button>
        </div>

        <!-- 泰森多边形分析面板-->
        <div :class="{'layer-hide':thiessenAnalystPanelVisible}" id="tsdbx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
            <h3>泰森多边形分析面板</h3>
            参数设置：<input type="text" value="10"/>
            <input type="button" id="thiessenAnalyst" value="开始分析"/>
            <br/>
        </div>

    </div>
</template>

<script>
    import 'ol/ol.css';
    import 'ol-ext/dist/ol-ext.css';

    import {Map,View,Overlay,Feature} from 'ol';
    import { Tile, Group, Image, Vector as lVector, VectorTile as lVectorTile, Heatmap as lHeatMap } from 'ol/layer'
    import {XYZ, Vector, Cluster} from 'ol/source'
    import { fromLonLat, toLonLat, get as projGet, getPointResolution } from 'ol/proj'
    import { GeoJSON } from 'ol/format'
    import {Draw,Select} from 'ol/interaction'
    import { Style, Fill, Stroke, Circle, Text, Circle as CircleStyle, Icon, RegularShape } from 'ol/style'
    import {defaults, Attribution, Zoom, ZoomSlider, ZoomToExtent, OverviewMap, ScaleLine, MousePosition} from 'ol/control';
    import { createStringXY } from 'ol/coordinate'
    import {Point,LineString,Polygon} from 'ol/geom'

    import Popup from 'ol-ext/overlay/Popup'
    import LayerSwitcher from 'ol-ext/control/LayerSwitcher'

    import { getArea, getLength } from 'ol/sphere'
    import { unByKey } from 'ol/Observable'

    export default {
        name:'MyGISMap',
        components: {
        },
        props: {
            mapCtrlTools:{
                type:Array,
                default:function () {
                    return []
                }
            },
            lyrdata: {
                type: Array,
                default: []
            },
            mapParams: {
                type: Object,
                default: {}
            },
            spatialQueryConditions: {
                type: Array,
                //default: {}  //若这样设置，当父组件不往子组件传值或传空值的时候，将导致后续有forEach报错
                default: function () {  //设置成这样后，即使父组件不传值也不会造成影响
                    return []
                }
            },
            pn: {  //parent_name的简称，即告诉此子组件，当前访问的父组件是谁，以便响应不同的业务逻辑
                type: String,
                default: function () {  //设置成这样后，即使父组件不传值也不会造成影响
                    return ''
                }
            },
        },
        data () {
            return {
                /**地图各悬浮面板的可视状态**/
                lyrPanelVisible:true,  //默认true为隐藏
                //legendDivVisible:true,  //默认true为隐藏
                measurePanelVisible:true, //默认true为隐藏
                decoratePanelVisible:true, //默认true为隐藏
                attrQueryPanelVisible:true, //默认true为隐藏
                geometryQueryPanelVisible:true, //默认true为隐藏
                distanceQueryPanelVisible:true, //默认true为隐藏
                bufferAnalystPanelVisible:true, //默认true为隐藏
                thiessenAnalystPanelVisible:true, //默认true为隐藏
                heatMapAnalystPanelVisible:true, //默认true为隐藏
                clusterLayerPanelVisible:true, //默认true为隐藏

                //hawkeyePanelVisible:true, //默认true为隐藏
                //orderLayerDialogVisible:true,  //默认true为隐藏
                //newLayerDialogVisible:true,  //默认true为隐藏
                //juanlianPanelVisible:true,  //默认true为隐藏
                //ftTreeSelectVisible:true,  //默认true为隐藏
                coordinateShow: true, //2D坐标,默认false不显示
                scaleShow: true, //显示比例尺,默认false不显示
                /**地图左上角-功能启动图标按钮-初始化控制**/
                layerShow:false,//图层控制-功能启动图标按钮，默认false不显示
                //legendShow:false,//图例-功能启动图标按钮，默认false不显示
                measureShow:false,//测量工具-功能启动图标按钮，默认false不显示
                //hawkEyeShow:false,//鹰眼-功能启动图标按钮，默认false不显示
                decorateShow:false,//鹰眼-功能启动图标按钮，默认false不显示
                //juanlianShow:false,//卷帘-功能启动图标按钮，默认false不显示
                //regionShow:false,//区域选择树-功能启动图标按钮，默认false不显示
                //attrTableShow:false,//属性表格-功能启动图标按钮，默认false不显示
                //mapQueryShow:false,//地图查询-功能启动图标按钮，默认false不显示
                //modelBuildingShow:false,//模型构建与空间分析-功能启动图标按钮，默认false不显示
                //statisticalAnalysisShow:false,//统计分析-功能启动图标按钮，默认false不显示
                attrQueryPanelShow:false,//属性查询-功能启动图标按钮，默认false不显示
                geometryQueryPanelShow:false,//几何空间查询-功能启动图标按钮，默认false不显示
                distanceQueryPanelShow:false,//距离查询-功能启动图标按钮，默认false不显示
                bufferAnalystPanelShow:false,//缓冲区分析-功能启动图标按钮，默认false不显示
                thiessenAnalystPanelShow:false,//(数据集)泰森多边形分析-功能启动图标按钮，默认false不显示
                heatMapAnalystPanelShow:false,//热力图分析-功能启动图标按钮，默认false不显示
                clusterLayerPanelShow:false,//聚类图-功能启动图标按钮，默认false不显示

                layerFlag: false, //图层选中显示红色小标志，默认false为隐藏
                //legendFlag: false, //图例选中显示红色小标志，默认false为隐藏
                measureFlag:false, //测量选中显示红色小标志，默认false为隐藏
                //hawkeyeFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
                decorateFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
                //juanlianFlag:false, //卷帘选中显示红色小标志，默认false为隐藏
                //regionFlag:false, //区域选中显示红色小标志，默认false为隐藏
                //dtcxFlag:false, //地图查询选中显示红色小标志，默认false为隐藏
                //attrTableFlag:true, //属性表格选中显示红色小标志，默认为true显示
                //modelFlag:false, //属性表格选中显示红色小标志，默认false为隐藏
                attrQueryFlag:false, //属性查询-选中显示红色小标志，默认false为隐藏
                geometryQueryFlag:false, //几何空间查询-选中显示红色小标志，默认false为隐藏
                distanceQueryFlag:false, //距离查询-选中显示红色小标志，默认false为隐藏
                bufferAnalystFlag:false, //缓冲区分析-选中显示红色小标志，默认false为隐藏
                thiessenAnalystFlag:false, //(数据集)泰森多边形分析-选中显示红色小标志，默认false为隐藏
                heatMapAnalystFlag:false, //热力图分析-选中显示红色小标志，默认false为隐藏
                clusterLayerFlag:false, //聚类图-选中显示红色小标志，默认false为隐藏

                //measureUrl:"https://iserver.supermap.io/iserver/services/map-world/rest/maps/World?prjCoordSys=%7B%22epsgCode%22:3857%7D",
                measureVectorLayer:null,
                measureInteraction:null,
                measureSource:null,
                measureFeature:null,

                highLightLayer: {},//用于高亮的图层
                highLightVector: {},//highLightLayer图层的源
                highLightStyle: {},//highLightLayer图层的style

                location_blue:"",
                location_green:"",

                //属性查询数据
                options: [
                    {
                        value: '北京市',
                        label: '北京市'
                    }, {
                        value: '天津市',
                        label: '天津市'
                    }, {
                        value: '河北省',
                        label: '河北省'
                    }, {
                        value: '黑龙江省',
                        label: '黑龙江省'
                    }, {
                        value: '吉林省',
                        label: '吉林省'
                    }, {
                        value: '辽宁省',
                        label: '辽宁省'
                    }, {
                        value: '河南省',
                        label: '河南省'
                    }, {
                        value: '山东省',
                        label: '山东省'
                    }, {
                        value: '广东省',
                        label: '广东省'
                    }, {
                        value: '广西',
                        label: '广西'
                    }, {
                        value: '宁都县',
                        label: '宁都县'
                    }, {
                        value: '于都县',
                        label: '于都县'
                    }, {
                        value: '兴国县',
                        label: '兴国县'
                    }, {
                        value: '会昌县',
                        label: '会昌县'
                    }, {
                        value: '寻乌县',
                        label: '寻乌县'
                    }, {
                        value: '石城县',
                        label: '石城县'
                    }, {
                        value: '瑞金市',
                        label: '瑞金市'
                    }, {
                        value: '章贡区',
                        label: '章贡区'
                    }
                ],

                options2:[
                    {
                        value: '政界',
                        label: '政界'
                    }, {
                        value: '工商界',
                        label: '工商界'
                    }, {
                        value: '教育文化卫生',
                        label: '教育文化卫生'
                    }
                ],
                value1: [],
                value2: [],

                attQueryConditions:"NAME like '%区%'",

                //热力图
                heatmap_radius: 45, //热力图-热点半径；默认45
                heatmap_blur: 70, //热力图-模糊尺寸；默认70

                //缓冲区分析
                buffer_radius:20000, //（单圈）缓冲半径，默认20000米
                radiusStr:'1000,5000,12000,20000', //（多圈）缓冲半径

                //地图量测
                drawSource: {},//图层数据源
                drawVector: {},//图层

            }
        },
        methods:{
            togglePanel(attr,attr2){
                this[attr] = !this[attr];
                this[attr2] = !this[attr2];
            },

            initMyMap(){
                let that = this;//以便在整个initMyMap方法体中的所有嵌套函数都能拿到thisVue

                //region定义Map和View
                var map = new Map({
                    target: 'mapDiv',
                    //controls: defaults({attribution: false, zoom: false, rotate: false}), //默认取消ol自带的控件显示
                    view: new View({
                        projection: this.mapParams.projection, //例如：'EPSG:4326', //发布的影像原始坐标系为4326，必须加上此投影才能显示发布的影像
                        //center: this.mapParams.center, //纯用4326时
                        center: fromLonLat(this.mapParams.center), //例如：[127.87535, 43.58279] 或 [126.47535, 43.58279],//地图初始中心点
                        minZoom: this.mapParams.minZoom, //例如：5，//可以缩小的最小级别;若为undefined表示无限制
                        maxZoom: this.mapParams.maxZoom, //例如：19，//可以放大的最大级别；若为undefined表示无限制
                        zoom: this.mapParams.zoom, //例如：6，//地图初始化时显示级别；注意：若此处未定义，地图初始化显示不出来
                    })
                });
                this.map = map;//把地图传出去，以便外面调用
                //endregion

                //region 统计专题图quxiao
                //let mIP,mPort,layerName,lyrIndex,resultIcon,layerTitle,mProj;
                /*let tjzttArr = that.MYCONFIG.themeChartMap[that.pn]; //有值，或undefined
                console.log(tjzttArr,"that.MYCONFIG.themeChartMap[that.pn]",86543);
                if(tjzttArr){
                    tjzttArr.forEach(item=>{
                        console.log(item,"that.MYCONFIG.themeChartMap[that.pn].item",901);
                        //themeChartMap(item);//调用
                        console.log(item.keyFieldArr[0],9011)
                        console.log(item.keyFieldArr[1],9012)
                        themeChartMap1();//调用
                    });
                }

                function themeChartMap1(){

                    //随机生成一个guid
                    let guid = Math.floor(Math.random() * 10000000).toString()
                    //初始化地图文档图层对象
                    let mapDocLayer = new Zondy.Map.MapDocTileLayer('', 'gn_tjt', {
                        ip: 'jlu3s.com',
                        port: '7035',
                        projection: 'EPSG:3857', //若不设置此属性，浏览器将被卡住并崩溃
                        //文档guid
                        guid: guid,
                        title:"赣南各县区GDP-统计专题图",
                    })
                    //将地图文档图层加载到地图中
                    map.addLayer(mapDocLayer);

                    //专题图操作对象
                    var ThemeOper
                    //专题图信息数组
                    var themesInfoArr = null
                    //初始化专题图服务类
                    ThemeOper = new Zondy.Service.ThemeOper(guid,null)
                    //设置ip地址
                    ThemeOper.ip = 'jlu3s.com'
                    //设置端口号
                    ThemeOper.port = '7035'

                    /!** 设置专题图默认参数*!/
                    function createThemesInfoArr() {
                        //专题图信息数组
                        var themesInfoArr = []
                        //初始化Zondy.Object.Theme.ThemesInfo，用于设置需添加的专题相关信息
                        themesInfoArr[0] = new Zondy.Object.Theme.ThemesInfo()
                        //设置图层名层
                        themesInfoArr[0].LayerName = '湖北省市级区划2'
                        //初始化指定图层的专题图信息对象，之后再给该数组赋值
                        themesInfoArr[0].ThemeArr = []
                        //实例化CChartTheme类
                        themesInfoArr[0].ThemeArr[0] = new Zondy.Object.Theme.CChartTheme()
                        //专题图名称
                        themesInfoArr[0].ThemeArr[0].Name = '统计专题图'
                        themesInfoArr[0].ThemeArr[0].ChartType = Zondy.Object.Theme.CChartType.Bar3D
                        //ChartThemeInfoArr设置
                        //设置指定专题图的专题信息，专题图可以有多个专题信息
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr = []
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0] = new Zondy.Object.Theme.CChartThemeInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Expression = 'gdp'
                        //必须要填写,否则会出错dcserver会挂掉
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Caption = 'gdp'
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].IsVisible = true
                        //实例化CRegInfo类
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo = new Zondy.Object.Theme.CRegInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.Angle = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.EndClr = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillClr = 10
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillMode = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FullPatFlg = true
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatClr = 3
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatHeight = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatWidth = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.OutPenW = 1

                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1] = new Zondy.Object.Theme.CChartThemeInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Expression = 'cz'
                        //必须要填写,否则会出错dcserver会挂掉
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Caption = 'cz'
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].IsVisible = true
                        //实例化CRegInfo类
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo = new Zondy.Object.Theme.CRegInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.Angle = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.EndClr = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillClr = 11
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillMode = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FullPatFlg = true
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatClr = 10
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatHeight = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatWidth = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.OutPenW = 1

                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2] = new Zondy.Object.Theme.CChartThemeInfo()
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Expression = 'GDP2014'
                        // //必须要填写,否则会出错dcserver会挂掉
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Caption = 'GDP2014'
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].IsVisible = true
                        // //实例化CRegInfo类
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo = new Zondy.Object.Theme.CRegInfo()
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.Angle = 0
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.EndClr = 0
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillClr = 12
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillMode = 0
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FullPatFlg = true
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatClr = 10
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatHeight = 5
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatWidth = 5
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.OutPenW = 1
                        //RepresentInfo设置
                        themesInfoArr[0].ThemeArr[0].RepresentInfo = new Zondy.Object.Theme.CChartThemeRepresentInfo()
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel = new Zondy.Object.Theme.CAnnInfo()
                        //标注(参数值)覆盖方式：覆盖
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel.Ovprnt = true
                        //小数位数
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.DigitLabel = 7
                        //是否显示参数值
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.IsDrawLabel = true
                        //参数值类型：真实值
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.FormatLabel = Zondy.Object.Theme.CChartLabelFormat.Value
                        //直方图,折线图，点图属性设置
                        //最大高度
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.MaxLength = 60
                        //厚度
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.ThickPersent = 10
                        //直方图中的宽度或折线图中的横向间隔
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.Width = 2
                        //点图半径或折线图中的点半径
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.PlotRadius = 2
                        //饼图属性设置
                        //最小半径
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.MinRadius = 4
                        //角度
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.PieTiltedAngle = 30
                        //固定大小
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.PieSizeFixFlag = 1
                        return themesInfoArr
                    }

                    addUniqueThemesInfo();//执行添加
                    /!** 添加专题图*!/
                    function addUniqueThemesInfo() {
                        console.log(12)
                        deleteTheme()
                        themesInfoArr = createThemesInfoArr()
                        console.log(themesInfoArr,121)
                        //添加专题图（不是在原文档上添加，会重新生成一个专题图缓存文档）
                        ThemeOper.addThemesInfo('gn_tjt', '0/0', themesInfoArr, onUniqueTheme)
                    }

                    /!** 更新专题图*!/
                    function updateTheme() {
                        if (themesInfoArr != null && themesInfoArr.length > 0) {
                            var cType = Math.ceil(Math.random() * 7)
                            themesInfoArr[0].ThemeArr[0].ChartType = cType
                        }
                        //更新专题图,onUniqueTheme为回调函数
                        ThemeOper.updateThemesInfo('gn_local', '1/0', themesInfoArr, onUniqueTheme)
                    }

                    /!** 删除专题图*!/
                    function deleteTheme() {
                        if (themesInfoArr) {
                            //删除专题图,onUniqueTheme为回调函数
                            ThemeOper.removeThemesInfo('gn_local', '1/0', onUniqueTheme)
                            themesInfoArr = null
                        }
                    }

                    function onUniqueTheme(flg) {
                        if (flg) {
                            //刷新图层前要进行此设置。加载之前的缓存文档,保证专题图能正常显示
                            mapDocLayer.options.keepCache = false
                            //刷新图层，实时显示专题图
                            mapDocLayer.refresh()
                            //设置为读取缓存，以加快显示效率
                            mapDocLayer.options.keepCache = true
                        }
                    }

                }

                function themeChartMap({mIP,mPort,layerName,lyrIndex,keyFieldArr,layerTitle,mProj}){
                    //随机生成一个guid
                    let guid = Math.floor(Math.random() * 10000000).toString()
                    //初始化地图文档图层对象
                    let mapDocLayer = new Zondy.Map.MapDocTileLayer('', layerName, {
                        ip: mIP,
                        port: mPort,
                        projection: mProj, //若不设置此属性，浏览器将被卡住并崩溃
                        //文档guid
                        guid: guid,
                        title:layerTitle,
                    })
                    //将地图文档图层加载到地图中
                    map.addLayer(mapDocLayer);

                    //专题图操作对象
                    var ThemeOper
                    //专题图信息数组
                    var themesInfoArr = null
                    //初始化专题图服务类
                    ThemeOper = new Zondy.Service.ThemeOper(guid,null)
                    //设置ip地址
                    ThemeOper.ip = mIP
                    //设置端口号
                    ThemeOper.port = mPort

                    /!** 设置专题图默认参数*!/
                    function createThemesInfoArr() {
                        //专题图信息数组
                        var themesInfoArr = []
                        //初始化Zondy.Object.Theme.ThemesInfo，用于设置需添加的专题相关信息
                        themesInfoArr[0] = new Zondy.Object.Theme.ThemesInfo()
                        //设置图层名层
                        themesInfoArr[0].LayerName = layerTitle + '-统计专题图'
                        //初始化指定图层的专题图信息对象，之后再给该数组赋值
                        themesInfoArr[0].ThemeArr = []
                        //实例化CChartTheme类
                        themesInfoArr[0].ThemeArr[0] = new Zondy.Object.Theme.CChartTheme()
                        //专题图名称
                        themesInfoArr[0].ThemeArr[0].Name = '统计专题图'
                        themesInfoArr[0].ThemeArr[0].ChartType = Zondy.Object.Theme.CChartType.Bar3D
                        //ChartThemeInfoArr设置
                        //设置指定专题图的专题信息，专题图可以有多个专题信息
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr = []
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0] = new Zondy.Object.Theme.CChartThemeInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Expression = keyFieldArr[0]  // 'GDP亿'
                        //必须要填写,否则会出错dcserver会挂掉
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Caption =  keyFieldArr[0]  // 'GDP亿'
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].IsVisible = true
                        //实例化CRegInfo类
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo = new Zondy.Object.Theme.CRegInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.Angle = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.EndClr = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillClr = 10
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillMode = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FullPatFlg = true
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatClr = 3
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatHeight = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatWidth = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.OutPenW = 1

                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1] = new Zondy.Object.Theme.CChartThemeInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Expression =  keyFieldArr[1]  // 'GDP亿'
                        //必须要填写,否则会出错dcserver会挂掉
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Caption =  keyFieldArr[1]  // 'GDP亿'
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].IsVisible = true
                        //实例化CRegInfo类
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo = new Zondy.Object.Theme.CRegInfo()
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.Angle = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.EndClr = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillClr = 11
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillMode = 0
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FullPatFlg = true
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatClr = 10
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatHeight = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatWidth = 5
                        themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.OutPenW = 1

                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2] = new Zondy.Object.Theme.CChartThemeInfo()
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Expression = 'GDP2014'
                        // //必须要填写,否则会出错dcserver会挂掉
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Caption = 'GDP2014'
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].IsVisible = true
                        // //实例化CRegInfo类
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo = new Zondy.Object.Theme.CRegInfo()
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.Angle = 0
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.EndClr = 0
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillClr = 12
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillMode = 0
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FullPatFlg = true
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatClr = 10
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatHeight = 5
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatWidth = 5
                        // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.OutPenW = 1
                        //RepresentInfo设置
                        themesInfoArr[0].ThemeArr[0].RepresentInfo = new Zondy.Object.Theme.CChartThemeRepresentInfo()
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel = new Zondy.Object.Theme.CAnnInfo()
                        //标注(参数值)覆盖方式：覆盖
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel.Ovprnt = true
                        //小数位数
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.DigitLabel = 7
                        //是否显示参数值
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.IsDrawLabel = true
                        //参数值类型：真实值
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.FormatLabel = Zondy.Object.Theme.CChartLabelFormat.Value
                        //直方图,折线图，点图属性设置
                        //最大高度
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.MaxLength = 60
                        //厚度
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.ThickPersent = 10
                        //直方图中的宽度或折线图中的横向间隔
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.Width = 2
                        //点图半径或折线图中的点半径
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.PlotRadius = 2
                        //饼图属性设置
                        //最小半径
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.MinRadius = 4
                        //角度
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.PieTiltedAngle = 30
                        //固定大小
                        themesInfoArr[0].ThemeArr[0].RepresentInfo.PieSizeFixFlag = 1
                        return themesInfoArr
                    }

                    addUniqueThemesInfo();//执行添加
                    /!** 添加专题图*!/
                    function addUniqueThemesInfo() {
                        deleteTheme()
                        themesInfoArr = createThemesInfoArr()
                        //添加专题图（不是在原文档上添加，会重新生成一个专题图缓存文档）
                        ThemeOper.addThemesInfo(layerName, lyrIndex, themesInfoArr, onUniqueTheme)
                    }

                    /!** 更新专题图*!/
                    function updateTheme() {
                        if (themesInfoArr != null && themesInfoArr.length > 0) {
                            var cType = Math.ceil(Math.random() * 7)
                            themesInfoArr[0].ThemeArr[0].ChartType = cType
                        }
                        //更新专题图,onUniqueTheme为回调函数
                        ThemeOper.updateThemesInfo(layerName, lyrIndex, themesInfoArr, onUniqueTheme)
                    }

                    /!** 删除专题图*!/
                    function deleteTheme() {
                        if (themesInfoArr) {
                            //删除专题图,onUniqueTheme为回调函数
                            ThemeOper.removeThemesInfo(layerName, lyrIndex, onUniqueTheme)
                            themesInfoArr = null
                        }
                    }

                    function onUniqueTheme(flg) {
                        if (flg) {
                            //刷新图层前要进行此设置。加载之前的缓存文档,保证专题图能正常显示
                            mapDocLayer.options.keepCache = false
                            //刷新图层，实时显示专题图
                            mapDocLayer.refresh()
                            //设置为读取缓存，以加快显示效率
                            mapDocLayer.options.keepCache = true
                        }
                    }
                }//end of themeChatMap()*/
                //endregion

                //region自定义加载图层
                let lyrdata = this.lyrdata;
                for (let i = 0, len = lyrdata.length; i < len; i++) {
                    let tmpLyrs = this.addLayerAtInit(lyrdata[i]);
                    tmpLyrs.forEach(value => {
                        this.map.addLayer(value);
                    }) //end fo forEach
                } //end of for
                //endregion

                //region地图控件
                /*集中调用*/
                addZoomControl();
                addZoomExtentControl();
                addMousePositionControl();
                addScaleControl();
                addEagleViewControl();

                //缩放控件
                function addZoomControl() {
                    if (map != null) {
                        var zoom = new Zoom()
                        map.addControl(zoom)
                    }
                }
                //复位
                function addZoomExtentControl() {
                    if (map != null) {
                        var zoomToExtent = new ZoomToExtent({
                            /*extent: [13100000, 4290000,
                             13200000, 5210000],*/
                            extent:that.mapParams.myZoomExtent,
                        })
                        map.addControl(zoomToExtent)
                    }
                }

                //添加坐标
                function addMousePositionControl() {
                    if (map != null) {
                        var mousePositionControl = new MousePosition({
                            //坐标格式
                            coordinateFormat: createStringXY(5),//坐标小数位数
                            //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
                            projection: 'EPSG:4326',
                            //坐标信息显示样式类名，默认是'ol-mouse-position'
                            className: 'custom-mouse-position',
                            //显示鼠标位置信息的目标容器
                            target: document.getElementById('mouse-position'),
                            //未定义坐标的标记
                            undefinedHTML: '&nbsp;',
                        })
                        map.addControl(mousePositionControl)
                    }
                }

                //比例尺控件
                function addScaleControl() {
                    if (map != null) {
                        //实例化比例尺控件（ScaleLine）
                        var scaleLineControl = new ScaleLine({
                            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
                            units: 'metric',
                            target: 'scaleBar',
                            className: 'ol-scale-line'
                        })
                        map.addControl(scaleLineControl)
                    }
                }

                //鹰眼快视
                function addEagleViewControl() {
                    const tdk = '35b6d71d2630c03a174e26641b34ddc9';//天地图数据服务Key
                    let TiandiMap_img,TiandiMap_imgcia;
                    if (map != null) {
                        TiandiMap_img = new Tile({
                            name: '天地图影像图层',
                            visible: true, //图层不可见
                            source: new XYZ({
                                url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
                                wrapX: false,
                            }),
                        })
                        TiandiMap_imgcia = new Tile({
                            name: '天地图影像注记图层',
                            visible: true, //图层不可见
                            source: new XYZ({
                                url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + tdk,
                                wrapX: false,
                            }),
                        })
                        //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
                        var overviewMapControl = new OverviewMap({
                            //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
                            className: 'ol-overviewmap ol-custom-overviewmap',
                            //鹰眼中加载同坐标系下不同数据源的图层
                            layers: [TiandiMap_img, TiandiMap_imgcia],
                            //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
                            collapseLabel: '\u00BB',
                            //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
                            label: '\u00AB',
                            //初始为展开显示方式
                            collapsed: true, //true为默认折叠
                            view: new View({ //20210929此处自定义增加了view的设置
                                projection: 'EPSG:3857',
                                multiWorld: true
                            }),
                        })
                        map.addControl(overviewMapControl)
                    }
                }
                //endregion

                //region图层管理控件
                if (!document.body.classList.contains('hideOpacity')) {
                    document.body.classList.add('hideOpacity')
                    document.body.classList.add('hidePercent')
                }
                let lyrs = [];
                let switcher = new LayerSwitcher({
                    target: document.querySelector('#' + this.lyrBox),
                    show_progress: true, //在切片图层上显示进度条，默认为false
                    reordering: true, //允许图层重新排序，默认值为true
                    trash: false, //添加垃圾桶按钮以删除图层，默认为false
                    extent: true, //添加范围按钮以缩放到图层范围
                    //layerGroup: lyrsForLayerSwitcher //筛选出要显示的图层
                })
                //通过这种方式覆盖了LayerSwitcher.js源代码中的ol_control_LayerSwitcher.prototype.tip
                //从而重新定义了title提示信息
                switcher.tip = {
                    up: '上下移动改变图层叠加顺序[up/down]',
                    down: '往下[down]',
                    info: '图层相关信息说明[informations...]',
                    extent: '跳转到该图层最大范围[zoom to extent]',
                    trash: '移除该图层[remove layer]',
                    plus: '展开/收缩图层组[expand/shrink]'
                }
                map.addControl(switcher)
                //endregion 图层管理控件

                //region信息窗口相关
                let popup = new Popup (
                    {	popupClass: "default", //"tooltips", "warning" "black" "default", "tips", "shadow","anim"
                        closeBox: true,
                        onshow: function(){ console.log("You opened the box"); },
                        onclose: function(){ console.log("You close the box"); },
                        positioning: 'auto',
                        autoPan: true,
                        autoPanAnimation: { duration: 750 }
                    });
                map.addOverlay(popup); //一定要加到地图上，否则不显示；后续操作不要随意that.map.getOverlays().clear()移除overlay图层，否则将导致信息窗口显示不出来

                let featurePics = this.MYCONFIG.featurePics;

                //let spatialQueryConditions = this.spatialQueryConditions; //取消这种二次传递等方式，改用下面的that.pn的方式
                let spatialQueryConditions = that.MYCONFIG.spatialQueryConditions[that.pn]; //有值，或undefined
                console.log("spatialQueryConditions:",spatialQueryConditions,676)

                function getHtml(features) {
                    //创建属性框
                    let html = '';
                    html += `<div class="ol-popupfeature">`;
                    //html += `<i class="ol-fix"></i>`
                    html += `<table>`;
                    html += `<tr><th>属性名称</th><th>属性值</th></tr>`;

                    let f = features.values_;//与sm相比，Zondy返回的feature多包了一层value_【相当于value_.value_后才能拿到字段的值】，所以此处多访问一层

                    //console.log(f,20)

                    //遍历各属性字段信息并放置到表格中
                    for (const key in f.values_) {
                        if (f.values_.hasOwnProperty(key)
                            && key != 'geometry'
                            && key != 'SmID'
                            && key != 'SmUserID'
                            && key != 'the_geom'
                            && key != 'PopupInfo'
                            && key != 'imgSrc'   //之前自定义
                            && key != 'UserID'  //Zondy
                            && key != 'mpLayer'  //Zondy
                        ) {
                            const element = f.values_[key];
                            if (element) {
                                html += `<tr><td>${key}</td><td>${element}</td></tr>`;
                            }
                        }
                    }

                    //检测是否含有图片，若有则输出为html格式内容以便后续插入信息窗口中
                    let picsDiv;
                    let imgSrcStr;
                    //根据imgSrc属性字段的值来获取相关图片地址
                    if(spatialQueryConditions){
                        console.log("→使用方法2：配置信息读取图片地址法")
                        picsDiv = getPicsDivFromSpatialQueryConditions(f);
                    }
                    //如果有图片则把图片罗列出来
                    if(picsDiv){
                        html += picsDiv;
                    }
                    html += `</table>`;
                    html += `</div>`;
                    return html;
                } //end of getHtml()

                //（方法1）根据某要素图形所含的图片地址数组构建图片Div
                function buildPicDivForFeature(imgSrcArr){
                    let picsDiv = "";
                    imgSrcArr.forEach(item => {
                        if(item){
                            picsDiv += "<a href='" + item + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + item + "' width='120px;' height='90px;'></a>";
                        }
                    });
                    picsDiv = "<tr>" +
                        "<td  colspan='2'>" + picsDiv + "</td>" +
                        "</tr>";
                    return picsDiv;
                }

                //（方法2）根据SpatialQueryConditions来构建图片Div
                function getPicsDivFromSpatialQueryConditions(features){
                    let myPicsDiv;
                    spatialQueryConditions.forEach(item=>{
                        if(item.keyField1 && item.keyField2 ){
                            myPicsDiv = whichFeatureHasPics(features.values_[item.keyField1],features.values_[item.keyField2]); //此处前面要承接picsDiv,否则图片出不来
                        }
                    });
                    return myPicsDiv;
                }

                function whichFeatureHasPics(ags1,ags2){
                    let picsDiv = "";
                    /*注意，这里的featurePics输入全局变量引入了*/
                    featurePics.forEach(item => {
                        if (item[0] == ags1 && item[1] == ags2 ) { //经过测试，此处暂时不能用===恒等
                            item[2].forEach(arr => {
                                picsDiv += "<a href='" + arr + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + arr + "' width='120px;' height='90px;'></a>";
                            });
                        }
                    });
                    picsDiv = "<tr>" +
                        "<td  colspan='2'>" + picsDiv + "</td>" +
                        "</tr>";
                    return picsDiv;
                }

                //移除信息窗口
                function removePopup() {
                    popup.setPosition(undefined);
                    //closer.blur();
                }
                //图层信息框内容更新
                function updateInfoView(feature) {
                    if (!feature && popup) {
                        removePopup();
                        return;
                    }
                    if(feature){

                        let html = getHtml(feature);
                        popup.show(getCenterPointFromExtent(feature.getGeometry().getExtent()), html);

                        function getCenterPointFromExtent(extentArr){
                            let x = (extentArr[0] + extentArr[2])/2;
                            let y = (extentArr[1] + extentArr[3])/2;
                            return [x,y];
                        }

                    }
                } //end of updateInfoView()


                let sqcArr = that.MYCONFIG.spatialQueryConditions[that.pn]; //有值，或undefined
                if(sqcArr){
                    sqcArr.forEach(item=>{
                        map.on(item.mouseEventType, mouseEventLinstener);
                    });
                }

                //（监听）地图单击、双击、悬浮等的全局事件
                //map.on('click', mouseEventLinstener); //map.on('pointermove', pointermoveLinstener);
                function mouseEventLinstener(e) {
                    map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
                        console.log(layer,212)
                        if(layer){
                            updateInfoView(feature);
                        }
                    });
                }
                //endregion

                //region缓冲区分析（单圈+多圈）
                let hcqfxArr = that.MYCONFIG.bufferAnalysis[that.pn]; //有值，或undefined
                //console.log(hcqfxArr,"that.MYCONFIG.bufferAnalysis[that.pn]",32123);
                if(hcqfxArr){
                    hcqfxArr.forEach(item=>{
                        bufferAnalysis(item);//目前只支持一个页面只进行一个图层的缓冲区分析
                    });
                }

                function  bufferAnalysis({bufferResultBaseUrl,mIP,mPort,leftRad,rightRad,radiusStr,srcInfo,singleResultPrefix,mulResultPrefix,mExtent}){
                    let bufferResultLayerArr = new Array()

                    document.getElementById("bufferOneRing").addEventListener("click", function(){
                        console.log("（单圈）缓冲区分析");
                        bufferOneRing(); //调用
                    });
                    document.getElementById("bufferMulRings").addEventListener("click", function(){
                        console.log("（多圈）缓冲区分析");
                        bufferMulRings(); //调用
                    });

                    //执行单圈缓冲区分析
                    function bufferOneRing() {
                        //显示进度条
                        startPressBar();
                        var clsBufBySR = new Zondy.Service.ClassBufferBySingleRing({
                            ip: mIP,
                            //port: '7035', //访问IGServer的端口号，.net版为6163，Java版为8089,
                            port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                            //缓冲时要素左侧缓冲半径
                            //leftRad: 10000,
                            leftRad: that.buffer_radius,
                            //缓冲时要素右侧缓冲半径
                            //rightRad: 10000,
                            rightRad: that.buffer_radius,
                            //不允许根据属性字段设置缓冲区半径
                            isByAtt: false,
                        })

                        clsBufBySR.srcInfo = srcInfo

                        var resultname = singleResultPrefix + getCurentTime()
                        clsBufBySR.desInfo = bufferResultBaseUrl + resultname

                        //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数
                        clsBufBySR.execute(AnalysisSuccess, 'post', false, 'json', () => {
                        })
                    } //end of bufferOneRing()

                    function bufferMulRings() {
                        //显示进度条
                        startPressBar();
                        var clsBufByMR = new Zondy.Service.ClassBufferByMultiplyRing({
                            ip: mIP,
                            port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                            //多圈缓冲分析各圈的缓冲半径
                            //radiusStr: '0.01,0.05,0.1', //主要针对经纬度
                            //radiusStr: '1000,5000,10000', //针对投影米坐标
                            radiusStr: that.radiusStr, //针对投影米坐标
                        })
                        //调用Zondy.Service.ClassBufferBase基类公共属性
                        clsBufByMR.srcInfo = srcInfo

                        var resultname = mulResultPrefix + getCurentTime()
                        clsBufByMR.desInfo = bufferResultBaseUrl + resultname
                        //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数
                        clsBufByMR.execute(AnalysisSuccess, 'post', false, 'json', () => {
                        })
                    } //end of bufferMulRings()

                    //分析成功后的回调
                    function AnalysisSuccess(data) {
                        //停止进度条
                        stopPressBar();
                        if (!data.results) {
                            alert('缓冲失败，请检查参数！')
                        } else {
                            if (data.results.length != 0) {
                                var resultLayerUrl = data.results[0].Value || data.results[0].value
                                //将结果图层添加到地图视图中显示
                                var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', [resultLayerUrl], {
                                    ip: mIP,
                                    port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                                    //extent:[12680206.554277513,2812952.111504088,12984878.80503216,3141822.257129459],
                                    extent:mExtent,
                                    isBaseLayer: false,
                                    title:"缓冲区分析结果图层",
                                });
                                map.addLayer(resultLayer)
                                bufferResultLayerArr.push(resultLayer)
                            }
                        }
                    }


                    function deleteAll() {
                        while (bufferResultLayerArr.length > 0) {
                            map.removeLayer(bufferResultLayerArr.pop())
                        }
                    }

                    function getCurentTime() {
                        var now = new Date()
                        //获取当前年份
                        var year = now.getFullYear()
                        //获取当前月份
                        var month = now.getMonth() + 1
                        //获取当前日期
                        var day = now.getDate()
                        //获取当前时刻
                        var hh = now.getHours()
                        //获取当前分钟
                        var mm = now.getMinutes()
                        //获取当前秒钟
                        var ss = now.getSeconds()
                        //将当前的日期拼串
                        var clock = year + '-'
                        if (month < 10) clock += '0'
                        clock += month + '-'
                        if (day < 10) clock += '0'
                        clock += day + '-'
                        if (hh < 10) clock += '0'
                        clock += hh
                        if (mm < 10) clock += '0'
                        clock += mm
                        if (ss < 10) clock += '0'
                        clock += ss
                        return clock
                    }
                } //end of bufferAnalysis()

                //endregion

                //region进度条
                //停止进度条
                function stopPressBar() {
                    document.getElementById("preview").style.display = "none";
                }

                //开始进度条动画
                function startPressBar() {
                    document.getElementById("preview").style.display = "block";
                }
                //endregion

                //region热力图
                let heatLayer = null;

                let gdpData = that.MYCONFIG.gdpData
                let attrStr = "city";

                document.getElementById("heatMapAnalyst").addEventListener("click", function() {
                    console.log("开始热力图分析");
                    if(heatLayer) map.removeLayer(heatLayer);
                    heatLayer = createHeatmapLayer(gdpData.data,parseInt(that.heatmap_blur, 10),parseInt(that.heatmap_radius, 10));
                    map.addLayer(heatLayer);
                });

                document.getElementById("heatMapClear").addEventListener("click", function() {
                    console.log("清除热力图");
                    if(heatLayer) map.removeLayer(heatLayer);
                });

                function createHeatmapLayer (data, blur, radius){
                    let source = new Vector({wrapX:false})
                    let features = []
                    for (let i in data) {
                        //var att = parseFloat(data[i].magnitude) ;
                        var att = parseFloat(data[i][attrStr]) ; console.log(att,257)
                        for(let j in data[i].coordinates)
                        {
                            let newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                            features.push(newFeature)
                        }
                    }
                    source.addFeatures(features)
                    //创建热力图层
                    let HeatmapLayer = new lHeatMap({
                        title:"生成的热力图",
                        source,
                        blur,
                        radius,
                        weight:'weight'  //默认热力图层权值字段（0-1）
                    });
                    return HeatmapLayer
                }

                function createFeature (coordinates,att) {
                    let tFeature =new Feature({
                        //geometry: new ol.geom["Point"](coordinates)
                        geometry: new Point(coordinates)
                    });
                    tFeature.set('weight', att - 5);
                    return tFeature;
                }
                //endregion

                //region聚类图
                var clusterLayer  = null;
                var ia = null;
                let attrStr2 = "city";

                document.getElementById("clusterLayerShow").addEventListener("click", function() {
                    console.log("显示聚类图");
                    if(clusterLayer) map.removeLayer(clusterLayer);
                    clusterLayer  = createClusterLayer(gdpData.data);
                    map.addLayer(clusterLayer);

                    ia =new Select({
                        condition: function(evt) {
                            return evt.type == 'singleclick' || evt.type == 'pointermove';
                        },
                        style: selectStyleFunction,
                        layers:[clusterLayer],
                        wrapX:false
                    });
                    map.addInteraction(ia);
                });

                document.getElementById("myClearClusterLayer").addEventListener("click", function() {
                    console.log("关闭聚类图");
                    if(clusterLayer) map.removeLayer(clusterLayer);
                    if(ia) map.removeInteraction(ia);
                });


                function createClusterLayer (data){
                    var vectorSource = new Vector({wrapX:false})
                    var features = []
                    for (var i in data) {
                        //var att = parseFloat(data[i].magnitude) ;
                        var att = parseFloat(data[i][attrStr2]) ;
                        for(var j in data[i].coordinates)
                        {
                            var newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                            features.push(newFeature)
                        }

                    }
                    vectorSource.addFeatures(features)
                    var clusterLayer = new lVector({
                        title:"聚类图图层",
                        source:new Cluster({
                            distance:40,   //最近的聚合图元距离(单位:像素)
                            source:vectorSource,
                            wrapX:false
                        }),
                        style:styleFunction
                    });
                    return clusterLayer
                }

                function createFeature (coordinates,att) {
                    var tFeature =new Feature({
                        //geometry: new ol.geom["Point"](coordinates)
                        geometry: new Point(coordinates)
                    });
                    tFeature.set('weight', att);
                    return tFeature;
                }
                var maxFeatureCount = 0;
                function getMaxFeatureCount()
                {
                    var features = clusterLayer.getSource().getFeatures();
                    var feature, radius;
                    for (var i = features.length - 1; i >= 0; --i) {
                        feature = features[i];
                        var originalFeatures = feature.get('features');
                        maxFeatureCount = Math.max(maxFeatureCount, originalFeatures.length);
                    }
                }
                function styleFunction(feature, resolution) {
                    var style;
                    var size = feature.get('features').length;
                    getMaxFeatureCount();
                    if (size > 1) {
                        style = new Style({
                            image: new Circle({
                                radius: 10+(size/maxFeatureCount)*10,
                                fill: new Fill({
                                    color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
                                })
                            }),
                            text: new Text({
                                text: size.toString(),
                                fill: new Fill({
                                    color: '#fff'
                                }),
                                stroke: new Stroke({
                                    color: 'rgba(0, 0, 0, 0.6)',
                                    width: 3
                                })
                            })
                        });
                    } else {
                        var originalFeature = feature.get('features')[0];
                        style = new Style({
                            geometry: originalFeature.getGeometry(),
                            image: new RegularShape({
                                radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                                radius2: 6,
                                points: 5,
                                angle: 0,
                                fill: new Fill({
                                    color: 'rgba(0, 250, 0, 0.8)'
                                }),
                                stroke: new Stroke({
                                    color: 'rgba(255, 204, 0, 0.2)',
                                    width: 1
                                })
                            })
                        });
                    }
                    return style;
                }

                function selectStyleFunction(feature) {
                    var size = feature.get('features').length;
                    getMaxFeatureCount();
                    var styles = [new Style({
                        image: new Circle({
                            radius: 10+(size/maxFeatureCount)*10,
                            fill: new Fill({
                                color: 'rgba(255, 255, 255, 0.01)'
                            })
                        })
                    })
                    ];
                    var originalFeatures = feature.get('features');
                    for (var i = originalFeatures.length - 1; i >= 0; --i) {
                        let originalFeature = originalFeatures[i];
                        styles.push(
                            new Style({
                                geometry: originalFeature.getGeometry(),
                                image: new RegularShape({
                                    radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                                    radius2: 6,
                                    points: 5,
                                    angle: 0,
                                    fill: new Fill({
                                        //color: 'rgba(0, 0, 205, 0.8)'
                                        color: 'rgba(255, 0, 205, 0.8)' //紫红色
                                    }),
                                    stroke: new Stroke({
                                        color: 'rgba(255, 204, 0, 0.2)',
                                        width: 1
                                    })
                                })
                            })
                        );
                    }
                    return styles;
                }

                //endregion

                //region 地图测量功能

                //定义“测量”和“勾绘”过程中用到的临时工作矢量层
                that.drawSource = new Vector() //图层数据源
                that.drawVector = new lVector({
                    title: '临时工作图层（绘制图形用）', //在图层面板中显示
                    source: that.drawSource,
                    //displayInLayerSwitcher:false,//设为false可以让此图层不显示在图层管理面板中
                    style: new Style({
                        //图层样式
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 0.2)' //填充颜色
                        }),
                        stroke: new Stroke({
                            color: '#ffcc33', //边框颜色
                            width: 2 // 边框宽度
                        }),
                        image: new Circle({
                            radius: 7,
                            fill: new Fill({
                                color: '#ffcc33'
                            })
                        })
                    })
                })

                //measure();
                //function measure() {
                //let that = this;
                //region 测量功能
                //OpenLayer5中已封装好与椭球相关的getLength和getArea方法
                //let wgs84Sphere = new ol.Sphere(6378137); //定义一个球对象
                let sketch//当前绘制的要素
                let helpTooltipElement//帮助提示框对象
                let helpTooltip//帮助提示框显示的信息
                let measureTooltipElement//测量工具提示框对象
                let measureTooltip//测量工具中显示的测量值
                let continuePolygonMsg = '继续点击绘制多边形'//当用户正在绘制多边形时的提示信息文本
                let continueLineMsg = '继续点击绘制线'//当用户正在绘制线时的提示信息文本
                let pointerMoveHandler = function (evt) {//鼠标移动事件处理函数
                    if (evt.dragging) {
                        return
                    }
                    /** @type {string} */
                    let helpMsg = '点击开始绘制' //当前默认提示信息
                    //判断绘制几何类型设置相应的帮助提示信息
                    if (sketch) {
                        let geom = sketch.getGeometry()
                        if (geom instanceof Polygon) helpMsg = continuePolygonMsg //绘制多边形时提示相应内容
                        else if (geom instanceof LineString) helpMsg = continueLineMsg //绘制线时提示相应内容
                    }
                    helpTooltipElement.innerHTML = helpMsg //将提示信息设置到对话框中显示
                    helpTooltip.setPosition(evt.coordinate) //设置帮助提示框的位置
                }
                //鼠标移动与动态帮助提示
                function mapPointMove() {
                    map.on('pointermove', pointerMoveHandler) //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
                }

                let typeSelect = 'area' //全局变量，默认值为‘area’测面
                let distanceDiv = document.getElementById('myMeasureDistance') //测量类型对象-距离
                let areaDiv = document.getElementById('myMeasureArea') //测量类型对象-面积
                let draw //全局变量，以便后续移除

                //点击测距离
                //bus.$on('myMeasureDistance', function () {
                document.getElementById("myMeasureDistance").addEventListener("click", function(){
                        console.log("（距离）量测");
                        that.map.removeLayer(that.drawVector) //先移除再添加，否则控制台报错
                        that.map.addLayer(that.drawVector)
                        that.map.removeInteraction(draw) //移除绘制图形
                        typeSelect = 'distance'
                        addInteraction() //添加绘图进行测量
                        mapPointMove() //鼠标移动与动态帮助提示
                    }.bind(this)
                ) //监听量测中“距离”按钮的点击事件 by qhy

                //点击测面积
                //bus.$on('myMeasureArea', function () {
                document.getElementById("myMeasureArea").addEventListener("click", function(){
                        console.log("（面积）量测");
                        that.map.removeLayer(that.drawVector)
                        that.map.addLayer(that.drawVector)
                        that.map.removeInteraction(draw) //移除绘制图形
                        typeSelect = 'area'
                        addInteraction() //添加绘图进行测量
                        mapPointMove() //鼠标移动与动态帮助提示
                    }.bind(this)
                ) //监听量测中“面积”按钮的点击事件 by qhy

                //点击“清除”量测结果
                //bus.$on('myClearMeasure', function () {
                document.getElementById("myClearMeasure").addEventListener("click", function(){
                        console.log("（清除）量测");
                        if (draw) {
                            draw.setActive(false) //取消激活状态，以便退出绘制
                        }
                        let ols = that.map.getOverlays()
                        ols.clear() //把所有覆盖物（测量结果）都清楚掉
                        that.map.removeLayer(that.drawVector) //把vector图层也清除掉，从而清除测量图形
                        //注：此处不能通过var定义局部变量，会导致全局vector调用局部source而报错
                        that.drawSource = null //先清空全局变量source
                        that.drawSource = new Vector() //再实例化一个矢量图层给全局变量source，从而消除上次测量残留
                        that.drawVector.setSource(that.drawSource) //更新vector的新源，避免本次量测残留图形对后续新量测的影响

                    }.bind(this)
                ) //监听量测中“清除”按钮的点击事件 by qhy

                /**
                 * 加载交互绘制控件函数
                 */
                function addInteraction() {
                    let type = typeSelect == 'area' ? 'Polygon' : 'LineString'
                    draw = new Draw({
                        source: that.drawSource, //测量绘制层数据源
                        type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
                        style: new Style({
                            //绘制几何图形的样式
                            fill: new Fill({
                                color: 'rgba(255, 255, 0, 0.2)' //浅黄色
                            }),
                            stroke: new Stroke({
                                color: 'rgba(255, 255, 0, 0.7)', //黄色
                                lineDash: [10, 10],
                                width: 2
                            }),
                            image: new Circle({
                                radius: 5,
                                stroke: new Stroke({
                                    color: 'rgba(0, 0, 0, 0.7)' //黑色
                                }),
                                fill: new Fill({
                                    color: 'rgba(255, 0, 255, 0.5)' //紫红色
                                })
                            })
                        })
                    })
                    that.map.addInteraction(draw)

                    createMeasureTooltip() //创建测量工具提示框
                    createHelpTooltip() //创建帮助提示框

                    let listener
                    //绑定交互绘制工具开始绘制的事件
                    draw.on('drawstart', function (evt) {
                            // set sketch
                            sketch = evt.feature //绘制的要素

                            /** @type {ol.Coordinate|undefined} */
                            let tooltipCoord = evt.coordinate // 绘制的坐标
                            //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
                            listener = sketch.getGeometry().on('change', function (evt) {
                                let geom = evt.target //绘制几何要素
                                let output
                                if (geom instanceof Polygon) {
                                    output = formatArea(/** @type {ol.geom.Polygon} */(geom)) //面积值
                                    tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
                                } else if (geom instanceof LineString) {
                                    output = formatLength(/** @type {ol.geom.LineString} */(geom)) //长度值
                                    tooltipCoord = geom.getLastCoordinate() //坐标
                                }
                                measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
                                measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
                            })
                        },
                        this
                    )
                    //绑定交互绘制工具结束绘制的事件
                    draw.on('drawend', function (evt) {
                            measureTooltipElement.className = 'tooltip tooltip-static' //设置测量提示框的样式
                            measureTooltip.setOffset([0, -7])
                            // unset sketch
                            sketch = null //置空当前绘制的要素对象

                            // unset tooltip so that a new one can be created
                            measureTooltipElement = null //置空测量工具提示框对象
                            createMeasureTooltip() //重新创建一个测试工具提示框显示结果

                            helpTooltipElement.style.display = 'none'
                            unByKey(listener)
                            draw.setActive(false) //取消激活状态，以便退出绘制
                        },
                        this
                    )
                }

                /**
                 *创建一个新的帮助提示框（tooltip）
                 */
                function createHelpTooltip() {
                    if (helpTooltipElement) {
                        helpTooltipElement.parentNode.removeChild(helpTooltipElement)
                    }
                    helpTooltipElement = document.createElement('div')
                    helpTooltipElement.className = 'tooltip hidden'
                    helpTooltip = new Overlay({
                        element: helpTooltipElement,
                        offset: [15, 0],
                        positioning: 'center-left'
                    })
                    that.map.addOverlay(helpTooltip)
                }
                /**
                 *创建一个新的测量工具提示框（tooltip）
                 */
                function createMeasureTooltip() {
                    if (measureTooltipElement) {
                        measureTooltipElement.parentNode.removeChild(measureTooltipElement)
                    }
                    measureTooltipElement = document.createElement('div')
                    measureTooltipElement.className = 'tooltip tooltip-measure'
                    measureTooltip = new Overlay({
                        element: measureTooltipElement,
                        offset: [0, -15],
                        positioning: 'bottom-center'
                    })
                    that.map.addOverlay(measureTooltip)
                }

                /**
                 * 测量长度输出
                 * @param {ol.geom.LineString} line
                 * @return {string}
                 */

                let formatLength = function (line) {
                    let length = getLength(line, {
                        projection: that.mapParams.projection
                    })
                    let output
                    if (length > 100) {
                        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
                    } else {
                        output = Math.round(length * 100) / 100 + ' ' + 'm'
                    }
                    return output
                }

                /**
                 * 测量面积输出
                 * @param {ol.geom.Polygon} polygon
                 * @return {string}
                 */
                let formatArea = function (polygon) {
                    //第二个formatArea函数了，这里还是用area全局变量吧
                    let area = getArea(polygon, {
                        projection: that.mapParams.projection
                    })
                    let output
                    if (area > 10000) {
                        output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'
                    } else {
                        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'
                    }
                    return output
                }
                //endregion 测量功能
                //}
                //endregion

            },

            //region初始化添加图层到地图里
            addLayerAtInit({lyrType,srcType,mUrl,mTitle,mName,mIP,mPort,mProjection,mExtent,mVisible,mSubLayers}){
                let that = this;
                let lyrArr = []
                let lyr = null
                /*if (lyrType === 'Image' && srcType === 'ImageWMS') {
                 lyr = new Tile({
                 title: mTitle,
                 name: mName,
                 visible: mVisible,
                 projection: 'EPSG:3857',
                 source: new ImageWMS({
                 url: mUrl,
                 params: {
                 BBOX: layerParams.ext
                 }
                 })
                 })
                 lyrArr.push(lyr)
                 }*/
                if (lyrType === 'Tile' && srcType === 'XYZ'){
                    if (mTitle === "路网" || mTitle === "卫星" || mTitle === "文字标注") {
                        lyr = new Tile({
                            title: mTitle,
                            name: mName,
                            visible: mVisible,
                            source: new XYZ({
                                url: mUrl,
                            })
                        })
                    }
                    lyrArr.push(lyr)
                }
                else if(lyrType === 'MapDocTileLayer' && srcType === 'Zondy'){ //Zondy地图文档瓦片图层
                    lyr = new Zondy.Map.MapDocTileLayer(mTitle, mName, {
                        ip: mIP,
                        port: mPort,
                        projection: mProjection,//默认是4326的
                        title: mTitle, //官方Zondy.Map.MapDocTileLayer里是没有这个属性的
                        visible: mVisible, //官方Zondy.Map.MapDocTileLayer里是没有这个属性的
                    });
                    lyrArr.push(lyr)
                }
                else if(lyrType === 'TileLayer' && srcType === 'Zondy'){  //Zondy瓦片地图服务
                    lyr = new Zondy.Map.TileLayer(mTitle, mName, {
                        ip: mIP,
                        port: mPort,
                        projection: mProjection,//默认是4326的
                        title: mTitle, //官方Zondy.Map.TileLayer里是没有这个属性的
                        visible: mVisible, //官方Zondy.Map.TileLayer里是没有这个属性的
                    });
                    lyrArr.push(lyr)
                }
                else if(lyrType === 'Doc' && srcType === 'Zondy'){  //Zondy矢量地图文档服务
                    lyr = new Zondy.Map.Doc(mTitle, mName, {
                        ip: mIP,
                        port: mPort,
                        projection: mProjection,//默认是4326的
                        title: mTitle, //官方Zondy.Map.Doc里是没有这个属性的
                        visible: mVisible, //官方Zondy.Map.Doc里是没有这个属性的
                    });
                    lyrArr.push(lyr)
                }
                else if(lyrType === 'GdbpLayer' && srcType === 'Zondy'){  //Zondy矢量图层服务
                    lyr = new Zondy.Map.GdbpLayer(mTitle, mName, {  //例如：['gdbp://MapGisLocal/sample/ds/地图综合/sfcls/水系']，要以数组形式注入
                        ip: mIP,
                        port: mPort,
                        //projection: mProjection,//默认是4326的  /*好像GdbpLayer类型等就不需要指定坐标系了，但必须有extent*/
                        extent:mExtent, /*注意：必须得有这个属性，否则出现加载不出数据且导致浏览器崩溃*/
                        title: mTitle, //官方Zondy.Map.GdbpLayer里是没有这个属性的
                        visible: mVisible, //官方Zondy.Map.GdbpLayer里是没有这个属性的
                        style: new Zondy.Object.CDisplayStyle({
                            AnnSizeFixed:true,//注记符号大小固定
                            PntSizeFixed:true,//点状符号大小固定，否则就显示很小而凸显不出来
                            LinSizeFixed:true,//线状符号大小固定
                            RegSizeFixed:true,//填充符号大小固定
                            ShowCoordPnt:true,//显示坐标点
                            //ShowElemRect:true,//显示元素的外包矩形
                        })
                    });
                    lyrArr.push(lyr)
                }
                else if (lyrType === 'Group') {
                    let lG = []
                    for (let i = 0; i < mSubLayers.length; i++) {
                        let lyr4tmps = null
                        lyr4tmps = that.addLayerAtInit(mSubLayers[i])
                        lyr4tmps.forEach(value => {
                            lG.push(value)
                        })
                    }
                    lyr = new Group({
                        title: mTitle,
                        visible: mVisible,
                        layers: lG
                    })
                    lyrArr.push(lyr)
                } else {
                    console.log(lyrType,srcType,mUrl,mTitle,'抱歉，地图资源类型不明，请检查并重试，或联系管理员协助解决。')
                }
                return lyrArr
            },
            //endregion

            //region地图属性查询
            //基于Zondy等地图属性查询
            AttQuery(){
                let that = this;

                let sxcxArr = that.MYCONFIG.attrQuery[that.pn]; //有值，或undefined
                console.log(sxcxArr,"that.MYCONFIG.attrQuery[that.pn]",86543);

                clearA();
                //显示进度条
                startPressBar();

                //初始化查询结构对象，设置查询结构包含几何信息
                var queryStruct = new Zondy.Service.QueryFeatureStruct();
                //是否包含几何图形信息
                queryStruct.IncludeGeometry = true;
                //是否包含属性信息
                queryStruct.IncludeAttribute = true;
                //是否包含图形显示参数
                queryStruct.IncludeWebGraphic = false;
                //实例化查询参数对象
                var queryParam = new Zondy.Service.QueryParameter({
                    resultFormat: "json",
                    struct: queryStruct
                });
                //设置查询分页号
                queryParam.pageIndex = 0;
                //设置查询要素数目
                queryParam.recordNumber =20;
                //设置属性条件
                //queryParam.where = document.getElementById("Conditions").value;
                //queryParam.where = "类型='土特产'";
                queryParam.where = that.attQueryConditions;
                console.log(queryParam,14)
                //实例化地图文档查询服务对象
                //var queryService = new Zondy.Service.QueryDocFeature(queryParam, "gn_dish", 1, { //①查询参数信息,②地图文档名称,③图层索引号,④{属性键值对}
                var queryService = new Zondy.Service.QueryDocFeature(queryParam, sxcxArr[0].layerName, sxcxArr[0].lyrIndex, { //①查询参数信息,②地图文档名称,③图层索引号,④{属性键值对}
                    //ip: "develop.smaryun.com",
                    //port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
                    //ip: "jlu3s.com",
                    //port: "7035"    //访问IGServer的端口号，.net版为6163，Java版为8089
                    ip: sxcxArr[0].mIP,
                    port: sxcxArr[0].mPort    //访问IGServer的端口号，.net版为6163，Java版为8089
                });
                //执行查询操作，querySuccess为查询回调函数
                queryService.query(querySuccess, queryError);

                //查询失败回调
                function queryError(e) {
                    //停止进度条
                    stopPressBar();
                }

                //查询成功回调
                var drawLayer = null;
                function querySuccess(result) {
                    //停止进度条
                    stopPressBar();
                    //初始化Zondy.Format.PolygonJSON类
                    var format = new Zondy.Format.PolygonJSON();
                    //将MapGIS要素JSON反序列化为ol.Feature类型数组
                    var features = format.read(result);
                    //var features = (new GeoJSON()).readFeatures(result.result.recordsets[0].features)
                    console.log(features,16)

                    //实例化一个矢量图层drawLayerr用于高亮显示结果
                    var drawSource = new Vector({
                        wrapX: false
                    });
                    drawSource.addFeatures(features);
                    drawLayer = new lVector({
                        title:"地图属性查询结果图层",
                        source: drawSource,
                        style: new Style({
                            //填充色
                            fill: new Fill({
                                color: 'rgba(255, 0, 0, 0.5)'
                            }),
                            //边线样式
                            stroke: new Stroke({
                                color: 'rgba(255,204, 51, 1)',
                                width: 1
                            }),
                            image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                                //anchor: [0.5, 0.9],
                                //anchor: [0.8, 0.5], //勉强可行
                                //anchor: [0, 0.5], //基本可行
                                //anchor: [0, 0], //一个准，一个偏移
                                anchor: [0.55, 0.95], //基本准了
                                //src: that.location_green  //此处得用base64格式的图片源才能显示出来
                                src: sxcxArr[0].resultIcon  //此处得用base64格式的图片源才能显示出来
                            })
                        })
                    });

                    that.map.addLayer(drawLayer);
                    /*map.setView(new ol.View({
                     center: [110, 30],
                     zoom: 4,
                     projection: 'EPSG:4326'
                     }));*/
                }
                //清除客户端查询结果信息
                function clearA() {
                    //停止进度条
                    stopPressBar();
                    if (drawLayer) {
                        //移除高亮显示结果图层drawLayerr
                        map.removeLayer(drawLayer);
                    }
                    else
                        return;
                }
                /*======进度条======*/
                //停止进度条
                function stopPressBar() {
                    document.getElementById("preview").style.display = "none";
                }
                //开始进度条动画
                function startPressBar() {
                    document.getElementById("preview").style.display = "block";
                }
            },

            //原先基于SM的
            attrQuery(){
                let that=this;

                let queryUrl,layerName,attributeFilter;

                let sxcxArr = that.MYCONFIG.attrQuery[that.pn]; //有值，或undefined
                console.log(sxcxArr,"that.MYCONFIG.attrQuery[that.pn]",86543);

                if(sxcxArr){
                    sxcxArr.forEach(item=>{
                        console.log(item,"that.MYCONFIG.attrQuery[that.pn].item",901)
                        queryUrl = item.queryUrl;
                        layerName = item.layerName;

                    });
                }

                console.log(this.value1,"value1",911);
                console.log(this.value2,"value2",912);

                let q1arr = [];
                if(this.value1){
                    this.value1.forEach(item=>{
                        console.log(item,"地理位置的each_item");
                        q1arr.push("地理位置 like '%"+item+"%'");
                    });
                }
                console.log(q1arr,701);
                let q1str = getStringFromArray(q1arr);
                console.log(q1str,702);
                function getStringFromArray(arr) {
                    var str = "";
                    for (let i = 0; i < arr.length; i++) {
                        str += arr[i]+ " or ";
                    }
                    //去掉最后一个or(包含四个字符）(如果不需要去掉，就不用写)
                    if (str.length > 0) {
                        str = str.substr(0, str.length - 4);
                    }
                    return str;
                }

                let q2str = "类型 like '%"+  this.value2 +"%'";

                attributeFilter = q1str + " and " + q2str;
                console.log(attributeFilter,703);

                let param = new SuperMap.QueryBySQLParameters({
                    queryParams: {
                        name:layerName,
                        attributeFilter:attributeFilter,
                    },
                    prjCoordSys: {"epsgCode":3857}   //通过查阅API，在这里设置这个参数后，后续的serviceResult就不用再进行坐标转换了
                });
                console.log(param,"param参数情况",855);
                new QueryService(queryUrl).queryBySQL(param, function (serviceResult) {
                    console.log(serviceResult,865865);
                    let vectorSource = new Vector({
                        features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
                        wrapX: false
                    });
                    let resultLayer = new lVector({
                        title:"属性查询结果图层",
                        source: vectorSource,
                        style:new Style({
                            image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                                anchor: [0.5, 0.9],
                                src: that.location_green  //此处得用base64格式的图片源才能显示出来
                            })
                        })
                    });
                    that.map.addLayer(resultLayer);
                });


            },
            //endregion

            //region地图几何空间查询
            geometryQuery(){
                let that=this;

                //let queryUrl,layerName,attributeFilter;
                let mIP,mPort,layerName,lyrIndex,resultIcon,layerTitle;

                let jhcxArr = that.MYCONFIG.geometryQuery[that.pn]; //有值，或undefined
                console.log(jhcxArr,"that.MYCONFIG.geometryQuery[that.pn]",86543);
                if(jhcxArr){
                    jhcxArr.forEach(item=>{
                        console.log(item,"that.MYCONFIG.geometryQuery[that.pn].item",901);
                        //queryUrl=item.queryUrl;
                        mIP=item.mIP;
                        mPort=item.mPort;
                        layerName=item.layerName;
                        lyrIndex=item.lyrIndex;
                        resultIcon=item.resultIcon;
                        layerTitle=item.layerTitle;

                    });
                }

                this.myClearGeometryQuery();//先清除先前的图形以避免干扰

                let vectorLayer, interaction, source,feature;
                source = new Vector({wrapX: false});
                vectorLayer = new lVector({
                    title:"几何查询的overlay图层",
                    source: source,
                    style: new Style({
                        stroke: new Stroke({
                            color: 'red',
                            width: 3
                        }),
                    })
                });
                this.map.addLayer(vectorLayer);
                this.geometryQueryVectorLayer=vectorLayer;

                interaction = new Draw({
                    source: source,
                    type: "Polygon",
                });

                this.geometryQueryInteraction = interaction;//传出去以便后续集中清理掉
                this.map.addInteraction(interaction);

                interaction.on('drawstart', function (evt) {
                    feature = evt.feature;
                });
                interaction.on('drawend', function () {

                    that.map.removeInteraction(interaction) //移除绘制图形的交互动作

                    //执行（基于sm的）几何空间查询
                    /*let myGeometry = feature.getGeometry();
                     console.log(myGeometry,765);
                     getGeometryQueryResult(myGeometry);*/

                    //基于Zondy的方式，要对feature做一下特别从处理才行
                    drawToolCallback_Polygon(feature);

                    function drawToolCallback_Polygon(feature)
                    {
                        //显示进度条
                        startPressBar();

                        //创建一个用于查询的区
                        var geomObj = new Zondy.Object.Polygon();
                        //console.log(feature,23)
                        //console.log(feature.getGeometry(),231) //方式一能获取几何图形
                        //console.log(feature.values_.geometry,232) //方式二也能获取几何图形
                        //geomObj.setByOL(feature.feature.values_.geometry);//案例中的写法在这里不生效
                        geomObj.setByOL(feature.getGeometry())
                        GeomQuery(geomObj); //执行Zondy几何空间查询
                    }

                });

                function GeomQuery(geomZD)
                {
                    //初始化查询结构对象，设置查询结构包含几何信息
                    var queryStruct = new Zondy.Service.QueryFeatureStruct();
                    //是否包含几何图形信息
                    queryStruct.IncludeGeometry = true;
                    //是否包含属性信息
                    queryStruct.IncludeAttribute = true;
                    //是否包含图形显示参数
                    queryStruct.IncludeWebGraphic = false;
                    //指定查询规则
                    var rule = new Zondy.Service.QueryFeatureRule({
                        //是否将要素的可见性计算在内
                        EnableDisplayCondition: false,
                        //是否完全包含
                        MustInside: false,
                        //是否仅比较要素的外包矩形
                        CompareRectOnly: false,
                        //是否相交
                        Intersect: true
                    });
                    //实例化查询参数对象
                    var queryParam = new Zondy.Service.QueryParameter({
                        r: Math.random(),
                        geometry: geomZD,
                        resultFormat: "json",
                        struct: queryStruct,
                        rule: rule
                    });
                    //设置查询分页号
                    queryParam.pageIndex = 0;
                    //设置查询要素数目
                    queryParam.recordNumber = 20;
                    //实例化地图文档查询服务对象
                    //var queryService = new Zondy.Service.QueryDocFeature(queryParam, "gn_snack", "1", {
                    var queryService = new Zondy.Service.QueryDocFeature(queryParam, layerName, lyrIndex, {
                        //ip: "develop.smaryun.com",
                        //port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
                        ip: mIP,
                        port: mPort    //访问IGServer的端口号，.net版为6163，Java版为8089
                    });
                    //执行查询操作，querySuccess为查询回调函数
                    queryService.query(querySuccess, queryError);
                }

                //查询失败回调
                function queryError(e) {
                    //停止进度条
                    stopPressBar();
                }

                //查询成功回调
                function querySuccess(result) {
                    //停止进度条
                    stopPressBar();
                    //初始化Zondy.Format.PolygonJSON类
                    var format = new Zondy.Format.PolygonJSON();
                    //将MapGIS要素JSON反序列化为ol.Feature类型数组
                    var features = format.read(result);

                    let vectorSource = new Vector({
                        //features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
                        features: features, //或后续通过vectorSource.addFeatures(features)来添加
                        wrapX: false
                    });
                    let resultLayer = new lVector({
                        title:"几何空间查询结果图层",
                        source: vectorSource,
                        style: new Style({
                            //填充色
                            fill: new Fill({
                                color: 'rgba(255, 0, 0, 0.5)'
                            }),
                            //边线样式
                            stroke: new Stroke({
                                color: 'rgba(255,204, 51, 1)',
                                width: 1
                            }),
                            image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                                //anchor: [0.5, 0.9],
                                //anchor: [0.8, 0.5], //勉强可行
                                //anchor: [0, 0.5], //基本可行
                                //anchor: [0, 0], //一个准，一个偏移
                                anchor: [0.55, 0.95], //基本准了
                                //src: that.location_blue  //此处得用base64格式的图片源才能显示出来
                                src: resultIcon  //此处得用base64格式的图片源才能显示出来
                            })
                        })
                    });
                    that.map.addLayer(resultLayer);

                    /*后续也可以通过这种方式来指定样式*/
                    /*let myStyle = new Style({
                     image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                     anchor: [0.5, 0.9],
                     src: that.location_blue  //此处得用base64格式的图片源才能显示出来
                     })
                     });
                     resultLayer.setStyle(myStyle)*/

                } //end of querySuccess(result)

                /*======进度条======*/
                //停止进度条
                function stopPressBar() {
                    document.getElementById("preview").style.display = "none";
                }
                //开始进度条动画
                function startPressBar() {
                    document.getElementById("preview").style.display = "block";
                }

                //原来基于SM的几何空间查询
                function getGeometryQueryResult(myGeometry){
                    let param = new SuperMap.QueryByGeometryParameters({
                        queryParams: {name: layerName},
                        geometry: myGeometry,
                        prjCoordSys: {"epsgCode":3857}   //通过查阅API，在这里设置这个参数后，后续的serviceResult就不用再进行坐标转换了
                    });
                    console.log(param,"几何查询参数为",764)
                    new QueryService(queryUrl).queryByGeometry(param, function (serviceResult) {
                        console.log(serviceResult,"几何查询serviceResult为",763)
                        let vectorSource = new Vector({
                            features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
                            wrapX: false
                        });
                        let resultLayer = new lVector({
                            title:"几何空间查询结果图层",
                            source: vectorSource
                        });
                        that.map.addLayer(resultLayer);

                        let myStyle = new Style({
                            image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                                anchor: [0.5, 0.9],
                                src: that.location_blue  //此处得用base64格式的图片源才能显示出来
                            })
                        });
                        resultLayer.setStyle(myStyle)

                    });
                }

            },
            //endregion

            //region（清除/取消）几何查询的图形
            myClearGeometryQuery(){
                let that = this;
                that.map.removeLayer(that.geometryQueryVectorLayer);//清除图形
                that.map.removeInteraction(that.geometryQueryInteraction) //移除绘制图形的交互动作
                //let ols = that.map.getOverlays();
            },
            //endregion

            //透明度调节
            handleOpt() {
                document.body.classList.toggle('hideOpacity')
                document.body.classList.toggle('hidePercent')
            },

            //地图中的面板可拖动
            dragFunc(id) {
                var Drag = document.getElementById(id);
                Drag.onmousedown = function(event) {
                    var ev = event || window.event;
                    event.stopPropagation();
                    var disX = ev.clientX - Drag.offsetLeft;
                    var disY = ev.clientY - Drag.offsetTop;
                    document.onmousemove =
                        function(event) {
                            var ev = event ||
                                window.event;
                            Drag.style.left = ev.clientX - disX + "px";
                            Drag.style.top = ev.clientY -
                                disY + "px";
                            Drag.style.cursor = "move";
                        };
                };
                Drag.onmouseup = function () {
                    document.onmousemove = null;
                    this.style.cursor = "default";
                };
            }
        },
        created(){
            //region 地图左上角-功能启动图标按钮-初始化控制
            if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
                this.mapCtrlTools.forEach(item=>{
                    if(item === 1){
                        this.layerShow = true; //图层控制-功能启动图标按钮
                    }else if(item === 2){
                        this.measureShow = true; //测量工具-功能启动图标按钮
                    }else if(item === 3){
                        this.decorateShow = true; //地图整饰-功能启动图标按钮
                    }
                    else if(item === 4){
                        this.attrQueryPanelShow = true; //属性查询-功能启动图标按钮
                    }else if(item === 5){
                        this.geometryQueryPanelShow = true; //几何空间查询-功能启动图标按钮
                    }
                    else if(item === 6){
                        this.bufferAnalystPanelShow = true; //缓冲区分析-功能启动图标按钮
                    }
                    else if(item === 7){
                        this.heatMapAnalystPanelShow = true; //热力图分析-功能启动图标按钮
                    }
                    else if(item === 8){
                        this.clusterLayerPanelShow = true; //聚类图-功能启动图标按钮
                    }
                    else if(item === 9){
                        this.thiessenAnalystPanelShow = true; // (数据集)泰森多边形分析-功能启动图标按钮
                    }
                });
            }
            //endregion
        },
        mounted(){
            /*地图初始化*/
            this.initMyMap();
            /*让地图中的某些面板可拖动*/
            //this.dragFunc(this.lyrBox);
            //this.dragFunc("sxcx"); //属性查询面板-可拖动
            //this.dragFunc("jhcx"); //几何分析面板-可拖动
            //this.dragFunc("hcqfx"); //缓冲区分析面板-可拖动
            //this.dragFunc("rlt"); //热力图面板-可拖动
            //this.dragFunc("jlt"); //聚类图面板-可拖动
            //this.dragFunc("tsdbx"); //泰森多边形分析面板-可拖动
        },
        watch:{},
        computed:{
            lyrBox: function () {
                return 'lyrBoxDiv' + new Date().valueOf()
            }
        }
    }
</script>

<style scoped>

    @import '../../assets/styles/my-ol-ext.css';

    .map-display {
        position: absolute;
        width: 100%;
        height:100%;
        background-color: darkgray;
    }

    /*地图工具栏相关样式  */
    .mytool-btns{
        position: relative;
        /*left: 10px;*/
        margin-left:2.5em;
        top: 10px;
        height: 60px;
        /*width:320px;*/ /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
        width:450px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    }

    .navbtn-items{
        float: left;
        margin: 0 5px;
        /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        text-align: center;
    }

    .navBtnDiv{
        /*width: auto;*/
        /*background-color:rgba(0,0,0,0);*/
        margin-left: 55px;
        /*margin-top: 5px;*/
    }
    .navbtn-btn{
        margin-right: 10px;
    }

    .navbtn-items:hover{
        cursor: pointer;
    }

    .navbtn-items>img{
        width:36px;
        height:36px;
        padding:5px;
    }
    .item-selected {
        position: absolute;
        width: 25px !important;
        height: 25px !important;
        left: 15px !important;
        bottom: 0;
    }

    .layer-hide {
        display:none;
    }

    /*右侧工具条对应面板*/
    /*工具项：图层管理&ndash;&gt;>对应面板*/
    .layerBox {
        width: 275px;
        padding: 5px;
        background-color: #ffffff;
        border: solid 1px #cecdd2;
        color: black;
        border-radius: 5px;
        /*display: none;*/ /*交由vue变量去控制*/
        position: absolute;
        z-index: 3;
        margin-left: 2.5em;
        box-shadow: 4px 4px 10px #888888;
    }

    #panelHeader {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        /* overflow-x: auto; */
    }

    .lyr-panel-title {
        text-align: center;
        font-size: 1.1em;
        line-height: 1.1em;
        display: block;
        font-weight: bold;
        color: white;
        margin: 0.3em;
    }

    .lyropt {
        font-size: 14px;
        margin-left: 10px;
    }

    /*20210929增加，调控图层面板的显示条目*/
    .layerTree{
        padding-inline-start: 15px;
    }
    .layerTree li {
        list-style: none;
        margin: 5px 10px;
        font-size: 12px;
    }
    li .layer{
        position: absolute;
        margin-top: 0px;
    }



    /*工具栏-（量测-整饰-控制-查询等）下拉框*/
    /*工具栏-（量测-整饰-控制-查询）下拉框-子项*/
    .map-tool-item{
        width: 85px;
        height: 29px;
        border-bottom: 1px solid #b4b4b4;
        cursor: pointer;
    }

    .map-tool-item>img{
        display: block;
        float: left;
        width: 20px;
        height: 20px;
        margin-top: 4px;
        margin-left: 5px;
    }

    .map-tool-item>span{
        display: block;
        float: left;
        width: 50px;
        height: 20px;
        margin-top: 4px;
        margin-left: 2px;
        line-height: 19px;
        text-align: center;
        font-size:12px;
        font-family:微软雅黑;
    }

    .map-tool-item-click{
        /*color: rgb(18,150,219);*/
        color: rgb(255,0,0);
    }
    /*工具项：量测-->>对应下拉面板*/
    .mapMeasurementTools{
        position:relative;

        width: 85px;
        left: 6em;

        background-color: #ffffff;
        box-shadow: 4px 4px 10px #888888;
        z-index: 5; /*高于lyrBox的3*/
    }

    /*工具项：整饰-->>对应下拉面板*/
    .mapDecorateTools{
        position:relative;
        width: 85px;
        left: 10em;
        background-color: #ffffff;
        box-shadow: 4px 4px 10px #888888;
        z-index: 4; /*高于lyrBox的3*/
    }

    /*地图整饰（坐标、比例尺、图例均通用）*/
    .map-decorate {
        position: absolute;
        z-index: 2;
    }
    /*比例尺位置*/
    /*用于覆盖原生比例尺的样式*/
    .ol-scale-line {
        background: #f39c12;
        border-radius: 4px;
        bottom: 8px;
        left: -20em; /*约等于16px*20=320px*/
        padding: 2px;
        position: absolute;
        height: 26px;
    }
    .map-scalebar{
        position:absolute;
        bottom:6px;
        left:10em;
    }
    /*坐标位置*/
    .map-coordinate{
        left:315px;
        /*right:105px;*/
        bottom:15px;
        /*top:10px;*/
        margin:2px 6px;
        padding: 2px 4px;
        font-family:Arial;
        color:#ffffff;
        background-color: #f39c12;
        /*min-width: 150px;*/
        border-radius: 4px;
        height: 20px;
    }

    /*进度条*/
    #preview
    {
        height: 100px;
        width: 100px;
        position: absolute;
        display: none;
        text-align: center;
        font-weight: bold;
        left: 50%;
        right: 0;
        top:50%;
        bottom:0;
        margin-left: -50px;
        margin-right: auto;
        margin-top:-50px;
        margin-bottom:auto;
        z-index: 1000;
    }

    .conditionControl {
        position: absolute;
        bottom: 5px;
        width: 200px;
        height: 160px;
        right: 10px;
        top: 5px;
        /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
        z-index: 2001;
        color: #ffffff;
        background-color: #4c4e5a;
        /*边缘的宽度*/
        border-width: 10px;
        /*圆角的大小 */
        border-radius: 10px;
        /*边框颜色*/
        border-color: #000 #000 #000 #000;
    }

</style>
